<template>
  <div>


    <!--项目list-->
    <el-row id="projectTosRow">
      <!--box-card-->
      <el-card class="box-card">
        <!-- 项目TOS组件 -->
        <project-tos-component
          ref="projectTosComponent"
          @rowClick="onProjectTosRowClick"
          @selectionChange="onProjectTosSelectionChange"
        ></project-tos-component>
      </el-card>
    </el-row>

    <!--收款list-->
    <el-row id="collectionListRow">
      <el-card class="box-card">
        <!-- 收款列表组件 -->
        <collection-list-component
          ref="collectionListComponent"
          :clicked-project-tos-view="clickedProjectTosView"
          :selected-project-tos-view-list="selectedProjectTosViewList"
        ></collection-list-component>

      </el-card>

    </el-row>

  </div>
</template>

<script>

import ProjectTosComponent from "@/views/business/components/projectTosComponent/ProjectTosComponent.vue";
import CollectionListComponent from "@/views/business/components/collectionListComponent/CollectionListComponent.vue";

export default {
  name: 'OrderDetailIndex',
  components: {CollectionListComponent, ProjectTosComponent},
  data() {
    return {
      // projectTOS组件: 被点击的项目
      clickedProjectTosView: {},
      // projectTos组件: 被选中的项目
      selectedProjectTosViewList: []


    }
  },
  methods: {
    /** 项目TOS组件行点击事件*/
    onProjectTosRowClick(row) {
      if (row===null){
        this.clickedProjectTosView = {}
      }else {
        // 通过prop传入
        this.clickedProjectTosView = row
      }
    },
    /** 项目TOS组件选择事件*/
    onProjectTosSelectionChange(selection) {
      // 通过prop传入
      this.selectedProjectTosViewList = selection
    }
  }
}
</script>

<style scoped>

/** el-card标题样式*/
.elCardTitle {
  font-size: 20px;
  color: #409eff;
  margin-right: 20px;
}

</style>


